<template>
  <el-row :gutter="20">
    <!-- 左侧 st -->
    <el-col :span="18">
    
      <!-- 今日设备运行状态 -->
      <el-card>
        <!-- 标题 -->
        <div class="title">
          <h3>今日设备运行状态</h3>
          <p class="ml">更新时间: {{ formattedDate }}</p>
          <el-icon
            color="#86909c"
            style="margin-left: 5px; cursor: pointer"
            @click="fetchDeviceStatus()"
            ><Refresh
          /></el-icon>
        </div>

        <!-- 设备信息 -->
        <div class="equipment">
          <!-- 循环项 -->
          <div class="item" v-for="item in statusData" :key="item.type">
            <h4>{{ item.type }}</h4>
            <img class="mt mb" :src="item.image" />
            <h1>{{ item.inUse }}/{{ item.total }}</h1>
            <div class="statistic-card">
              <el-statistic :value="item.faultyDevices">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    异常设备
                    <el-tooltip
                      effect="dark"
                      :content="`当前有${item.faultyDevices}台设备异常，请及时处理`"
                      placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>相较昨日</span>
                  <span class="green">
                    {{ item.trendValue }}%
                    <el-icon color="#67c23a" v-if="item.trend == 'up'">
                      <CaretTop />
                    </el-icon>

                    <el-icon color="#c60023" v-else>
                      <CaretBottom />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 常用功能 -->
      <el-card class="mt">
        <template #header>
          <div class="card-header">
            <h1>常用功能</h1>
          </div>
        </template>

        <div class="quick mt mb">
          <el-row>
            <el-col
              :span="4"
              v-for="(item, index) in blocks"
              :key="index"
              @click="navigate(item.name, item.path)"
            >
              <img :src="item.icon" />
              <p>{{ item.name }}</p>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 能源统计 -->
      <el-card class="mt">
        <template #header>
          <div class="card-header">
            <h1>能源统计</h1>
          </div>
        </template>

        <el-row>
          <el-col :span="9">
            <div ref="chartRef2" style="width: 100%; height: 400px"></div>
          </el-col>
          <el-col :span="15">
            <div ref="chartRef" style="width: 100%; height: 400px"></div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <!-- 右侧 st -->
    <el-col :span="6">
      <!-- 设备总览 -->
      <el-card>
        <template #header>
          <div class="card-header">
            <h1>设备总览</h1>
          </div>
        </template>

        <!-- 图表挂载容器 -->
        <div ref="chartRef3" style="width: 100%; height: 240px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { formatDate } from "@/utils/date"; // 引入日期格式化工具函数
import {
  statusApi,
  getBlocks,
  energyStatisticsRoutes,
  getBlocksEnergy,
  getDeviceOverview,
} from "@/api/status";
import type { BlockItem, StatusItem } from "@/api/status";

/**
 * 功能作用: echarts 图表的配置和使用
 * 功能描述: 能源统计区块的 ECharts 图表配置
 *
 * 引入 自定义的 ECharts 组件 useChart, 用于处理 ECharts 图表数据
 * 创建响应式变量,目的是为了在模板中使用 ECharts 组件,跟html中的 ref 属性对应
 *
 *
 * 创建 setChartData 函数,用于处理 能源统计 的图表数据
 * 在函数中定义 ECharts 的图表配置项,包括标题、提示框、图例、坐标轴、系列等
 * 调用 能源统计 接口获取数据
 * 判断接口返回的状态码是否为 200,如果是,则将接口返回的数据赋值给图表配置项
 * return chartOption,返回图表配置项
 * 调用自定义 ECharts 组件的 useChart 函数,传入 chartRef(能源统计的模板锚点) 和 chartOption(配置项) 作为参数
 *
 *
 * 创建 setChartData2 函数,用于处理 营收占比 的图表数据
 * 在函数中定义 ECharts 的图表配置项,包括标题、提示框、图例、坐标轴、系列等
 * 调用 营收占比 接口获取数据
 * 判断接口返回的状态码是否为 200,如果是,则将接口返回的数据赋值给图表配置项
 * return chartOption2,返回图表配置项
 * 调用自定义 ECharts 组件的 useChart 函数,传入 chartRef2(营收占比的模板锚点) 和 chartOption2(配置项) 作为参数
 *
 * 创建 setChartdata3 函数,用于处理 设备总览 的图表数据
 * 在函数中定义 ECharts 的图表配置项,包括雷达图的指示器和系列等
 * 调用 设备总览 接口获取数据
 * 判断接口返回的状态码是否为 200,如果是,则将接口返回的数据赋值给图表配置项
 * return chartOptions,返回图表配置项
 * 调用自定义 ECharts 组件的 useChart 函数,传入 chartRef3(设备总览的模板锚点) 和 chartOptions(配置项) 作为参数
 *
 * 注意:
 * 1. 需要确保 ECharts 组件已经正确安装并引入
 * 2. 确保接口返回的数据格式与图表配置项中的数据格式一致
 * 3. 如果需要动态更新图表数据,可以在 setChartData 函数中添加逻辑来处理数据变化
 * 4. 如果需要处理其他类型的图表,可以根据 ECharts 的文档进行相应的配置
 * 5. 确保在使用 ECharts 组件之前,已经正确引入了 ECharts 的样式和脚本
 */

import { useChart } from "@/hokes/useChart";
const chartRef = ref(null); // 能源统计
const chartRef2 = ref(null); // 营收占比
const chartRef3 = ref(null); // 设备总览
const setChartData = async () => {
  const chartOption: any = reactive({
    title: {
      text: "电量统计",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: [],
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
      ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: `{value}kw`,
      },
    },
    series: [
      {
        name: "充电量",
        type: "line",
        data: [20, 50, 30, 70, 60, 80, 40, 60, 50],
        lineStyle: {
          width: 4,
        },
        smooth: true,
        itemStyle: {
          color: "purple",
          shadowBlur: 5,
          shadowColor: "rgba(0,255,0,0.5)",
        },
      },
      {
        name: "充电时长",
        type: "line",
        data: [40, 60, 50, 80, 70, 90, 60, 70, 80],
        lineStyle: {
          width: 4,
        },
        smooth: true,
        itemStyle: {
          color: "lightgreen",
          shadowBlur: 5,
          shadowColor: "rgba(0,255,0,0.5)",
        },
      },
      {
        name: "充电功率",
        type: "line",
        data: [30, 40, 60, 50, 70, 20, 30, 40, 60],
        lineStyle: {
          width: 4,
        },
        smooth: true,
        itemStyle: {
          color: "skyblue",
          shadowBlur: 5,
          shadowColor: "rgba(0,255,0,0.5)",
        },
      },
    ],
  });
  const res = await energyStatisticsRoutes();
  if (res.code === 200) {
    // Echarts 的图表配置项
    chartOption.legend.data = res.data.list.map((item: any) => item.name);

    for (let i = 0; i < res.data.list.length; i++) {
      chartOption.series[i].name = res.data.list[i].name;
      chartOption.series[i].data = res.data.list[i].data;
    }
  }
  return chartOption;
};
useChart(chartRef, setChartData);
const setChartData2 = async () => {
  const chartOption2: any = reactive({
    legend: {
      top: "bottom",
    },
    tooltip: {
      trigger: "item",
      formatter: `{a}<br/>{b}:{c}`,
    },
    series: [
      {
        name: "营收占比",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        roseType: "area",
        emphasis: {
          label: {
            show: true,
            fontSize: "16",
            fontWeight: "bold",
          },
        },
        data: [
          // 默认数据,后期会通过接口获取
        ],
      },
    ],
    graphic: {
      type: "text",
      left: "center",
      top: "center",
      style: {
        text: "营收占比",
        fontSize: "20",
        fill: "#333",
      },
    },
  });
  const res = await getBlocksEnergy();
  if (res.code === 200) {
    chartOption2.series[0].data = res.data.list;
  }
  return chartOption2;
};
useChart(chartRef2, setChartData2);

const setChartdata3 = async () => {
  const chartOptions = reactive({
    radar: {
      // shape: 'circle',
      indicator: [
        { name: "闲置数", max: 65 },
        { name: "使用数", max: 160 },
        { name: "故障数", max: 300 },
        { name: "维修数", max: 380 },
        { name: "更换数", max: 520 },
        { name: "报废数", max: 250 },
      ],
    },
    series: [
      {
        name: "设备总览",
        type: "radar",
        data: [
          {
            value: [],
            name: "设备总览",
          },
        ],
      },
    ],
  });

  const res = await getDeviceOverview();
  if (res.code === 200) {
    chartOptions.series[0].data[0].value = res.data.list;
  }
  return chartOptions;
};
useChart(chartRef3, setChartdata3);

/**
 * 功能作用:获得当前时间
 * 功能描述: 调用 formatDate 函数,传入当前时间的 ISO 字符串格式,返回格式化后的日期字符串
 */
const formattedDate = formatDate(new Date().toISOString());

/**
 * 功能作用:今日设备运行状态区块的数据刷新
 * 功能描述: 声明一个响应式变量,用于存储设备状态数据,创建函数,调用接口,获取数据,如果请求成功,将数据赋值给响应式变量
 * 分两个部分:
 * 1:页面加载时,调用接口获取数据
 * 2:点击刷新图标时,调用接口获取数据
 * 获取接口数据后,用v-for循环遍历数据,渲染到页面上
 *
 */
const statusData = ref<StatusItem[]>([]);
async function fetchDeviceStatus() {
  const res = await statusApi();
  if (res.code === 200) {
    statusData.value = res.data || [];
  }
}
onMounted(() => {
  fetchDeviceStatus();
});

/**
 * 功能作用:常用区块的数据渲染和跳转
 * 功能描述:
 * 引入 vue-router ,声明实例,拿到里面的属性和方法
 * 引入 pinia 文件 - tabs.ts ,拿到 useTabsStore 快捷页签实例,声明实例,拿到里面的属性和方法
 * 拿到 tabsStore 实例 里的 addTab 函数, 用于添加新的标签页
 * 拿到 tabsStore 实例 里的 setCurrentTab 函数, 用于设置当前激活的标签页
 * 声明一个响应式变量,用于存储区块数据
 * 在页面加载时,调用接口获取数据,如果请求成功,将数据赋值给响应式变量,用户页面v-for循环渲染
 * 创建 navigate 函数,用于跳转到对应的路由,并添加快捷标签页, 函数的参数为 name(快捷页签名称) 和 url(路径)
 * 调用路由实例的 push 方法,传入 url 作为参数,用于跳转到对应的路由
 * 调用 tabsStore 实例的 addTab 函数,传入 name, url, "" 作为参数,用于添加当前路由对应的标签页
 * 调用 tabsStore 实例的 setCurrentTab 函数,传入 name, url 作为参数,用于设置当前高亮的标签页
 */
import { useRouter } from "vue-router";
const router = useRouter();
import { useTabsStore } from "@/store/tabs";
const tabsStore = useTabsStore();
const { setCurrentTab, addTab } = tabsStore;
const blocks = ref<BlockItem[]>([]);
onMounted(async () => {
  const res = await getBlocks();
  if (res.code === 200) {
    blocks.value = res.data || [];
  }
});
const navigate = (name: any, url: any) => {
  router.push(url);
  addTab(name, url, "");
  setCurrentTab(name, url);
};
</script>

<style scoped lang="less">
.title {
  display: flex;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  align-items: flex-end;
  p {
    color: #86909c;
    font-size: 16px;
  }
}

// 容器
.equipment {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  // 循环项
  .item {
    width: 30%;
    text-align: center;
    img {
      width: 50px;
    }
    // 标题
    h4 {
      margin-bottom: 10px;
    }

    h1 {
      font-size: 30px;
      margin: 5px 0;
    }
    :deep(.el-statistic__content) {
      margin-top: 5px !important ;
      margin-bottom: 5px !important ;
    }
  }
}

// 常用功能
.quick {
  margin-top: 30px;
  text-align: center;
  cursor: pointer;
  .el-row {
    .el-col {
      transition: all 0.3s;
      &:hover {
        transform: translateY(-5px);
      }
    }
  }
  p {
    margin-top: 10px;
    color: #333;
  }
}
</style>
